<template>
  <el-container class="snbind">
    <el-form class="box-card"
             label-width="120px"
             ref="form"
             @submit.native.prevent
             style="width: 100%"
    >

      <el-row   >
        <el-col :span="24" style="    padding: 0px 5px;">
          <el-alert style="padding: 3px 0px;"
                    effect="dark"
                    title="数据量较多，建议点上一条/下一条处理完一页后再进行刷新！"
                    type="warning"
                    :closable="false"
                    show-icon>
          </el-alert>
          <el-card class="box-card"  style="  margin: auto auto ;margin-top: 22px;" shadow="always" >
            <el-row >
              <el-col :span="24">
                <el-form-item label="请扫描SN/RFID" size="large" label-width="200px" style="margin-top: 10px;">
                  <el-input ref="txtScan" v-model="txtScan" placeholder="SN/RFID" @keyup.native.enter="execRevoke"  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row  :gutter="20" style=" margin: auto auto;margin-top: 22px;" >
            <el-col :span="24">
              <el-form-item label="病人消耗单列表" size="large" >
                <span v-for="(ob,index) in oprtUseList" :key="index">{{ob.busKey}}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20" style="margin: auto auto ;" >
            <el-col :span="12">
              <el-form-item label="收费数量" prop="qty" >
                <span style="    color: #f56c6c;font-size: 22px;">{{form.qty}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="已扫数量" prop="scanQty" >
                <span style="    color: #5daf34;">{{form.scanQty}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" >
            <el-col :span="12">
              <el-form-item label="住院号" prop="execUser">
                <el-input v-model="form.inpatientNo" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="门诊号" prop="execUser">
                <el-input v-model="form.outpatientNo" readonly/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin: auto auto ;" >
            <el-col :span="12">
              <el-form-item label="收费项目名称" prop="matrCodeHis" >
                <el-input v-model="form.matrNameHis" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收费项目代码" prop="matrCodeHis" >
                <el-input v-model="form.matrCodeHis" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="患者名称" prop="patientCode">
                <el-input v-model="form.patientName" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="患者" prop="patientCode">
                <el-input v-model="form.patientCode" readonly/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" >
            <el-col :span="12">
              <el-form-item label="SN码" prop="sn">
                <el-input v-model="form.sn" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收费价格" prop="price">
                <el-input v-model="form.price" readonly/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" >
            <el-col :span="12">
              <el-form-item label="消耗科室名称" prop="deptCodePatient">
                <el-input v-model="form.deptNamePatient" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="消耗科室代码" prop="deptCodePatient">
                <el-input v-model="form.deptNamePatient" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开单科室名称" prop="deptCodeOp">
                <el-input v-model="form.deptNameOp" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开单科室代码" prop="deptCodeOp">
                <el-input v-model="form.deptNameOp" readonly/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" >
            <el-col :span="12">
              <el-form-item label="手术单号" prop="oprtCode">
                <el-input v-model="form.oprtCode" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="记账日期" prop="billDate">
                <el-date-picker v-model="form.billDate"  readonly/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" >
            <el-col :span="12">
              <el-form-item label="计费人" prop="execUser">
                <el-input v-model="form.execUser" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="his收费流水号" prop="hisKey">
                <el-input v-model="form.hisKey" readonly/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>

        <!--<el-col :span="14" style="    padding: 0px 5px;">
          <el-alert style="padding: 3px 0px;"
                    effect="dark"
                    title="对应收费项目库存列表"
                    type="success"
                    :closable="false"
                    show-icon>
          </el-alert>

          <Report ref="report" propReportKey="stock"  v-show="form.id"
          :propOnlyFields="['matr_name','matr_spec', 'hrp_code', 'sn', 'rfid']"
                  :propNoAutoFetchData="true"
          ></Report>

        </el-col>-->
      </el-row>

    </el-form>
  </el-container>
</template>

<script>
import barcodeParse from '@/util/barcodeParse.js'
import Report from '@/components/report/Report.vue'


export default {
  data() {
    return {
      form: {
        matrCodeHis: '',
        inpatientNo: '',
        outpatientNo: '',
        sn: '',
        price: '',
        deptCodePatient: '',
        deptCodeOp: '',
        oprtCode: '',
        billDate: '',
        execUser: '',
        hisKey: '',
      },
      viewData: {},
      txtScan: '',
      oprtUseList: []
    }
  },
  name: 'snbind',
  methods: {

    async execRevoke() {
      const result = await this.$confirm('请详细核对耗材信息，核对正确，是否确认消耗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
      })
      if (!result)  return
      this.barCodeScan()
    },
    //扫码SN或RFID
    barCodeScan() {
      /* eslint-disable*/

      if(!this.txtScan){
        this.$refs.txtScan.focus()
        this.utilMessage.warning(" 请输入唯一码进行查询")
        return
      }

      let codeType = barcodeParse.barCodeType(this.txtScan)
      if(!codeType || codeType != 'SN' && codeType != 'RFID' ){
        this.$refs.txtScan.focus()
        this.utilMessage.error(" 唯一码【"+this.txtScan+"】类型非法")
        return
      }

      this.oprtUseList = []
      //数据加载过并且扫描的是RFID
      if(!this.form.sn){
        this.utilVue.loadShow(true)
        this.$ajax.get(`dept/his_bill/scanUseSN?opType=bind&matrCodeHis=${this.form.matrCodeHis}&sn=${this.txtScan}&inpatientCode=${this.form.inpatientNo}&outpatientNo=${this.form.outpatientNo}&hisKey=${this.form.hisKey}&oprtNo=${this.form.oprtCode}`).then((response) => {
          if(response.code == 0){
            this.utilMessage.success(response.msg)
            // Object.keys(this.form).forEach(key => (this.form[key] = ""))
            // this.form.sn = ''
            this.txtScan = '';
            this.$refs.txtScan.focus()
            this.oprtUseList = response.data
            this.form.scanQty = parseInt(this.form.scanQty) + (response.data ? response.data.length : 0 )
          }
          this.utilVue.loadHide()
        })
        return
      }else{
        this.txtScan = '';
        this.$refs.txtScan.focus()
        this.utilMessage.error(" 该收费明细已经绑定了SN")
        return
      }
    },

    getReportWrapper() {
      let wrapper =  this.$newWrapper().eq('hrp_code', '-1' )
      return wrapper
    },

    fetchReport() {
      let wrapper =  this.$newWrapper().eq('hrp_code',this.form.matrCodeHis ? this.form.matrCodeHis : '-1' )
      this.$refs.report.fetchData(false, wrapper)
    }
  },
  mounted() {
  },
  created() {
    this.$emit('event-register', {
      validate: (callback) => {
        this.$refs.editForm.validate(callback)
      },
      beforeSave: () => {
        this.$emit('data-callback', this.form)
        return true
      },
      afterMove: (formData, initData) => {
        this.form = global.utils.jsonClone(formData)
        this.$refs.txtScan.focus()
        // this.fetchReport()
        // 设置switch 元素默认值
      },
      afterSave: () => {  },
      beforeDelete: () => {
        return true
      },
      afterDelete: () => {
      },
      beforeFlow: (flowButtonKey) => {
        return true
      },
      afterFlow: (flowButtonKey) => {
      },
      beforeClose: () => {
        return true
      }
    })
  },
  props: {
    propParent: Object,
    propInitData: Object,
    propPrimaryKey: String,
    propDictionaries: Object,
    propCurrentRow: Object,
    propViewFormData: Object,
    propStatus: String,
    propRules: Object
  },
  components: {
    Report
  },
  computed: {
  }
}
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100%;
  }
</style>
